import React, { CSSProperties } from "react";
import { Select } from "antd";
import styles from "./index.less";
import cn from 'classnames';

export interface OptionProps {
  key?: string | number;
  val?: string;
  label?: string | number;
  value?: string
}

export interface SelectProps {
  Options: OptionProps[];
  value: string[] | number[];
  restProps?: object;
  onChange: (e: any, rest?: any) => void;
  className?: any;
  placeholder?: string;
  label?: string;
  style?: CSSProperties,
  mode?:string,
  labelStyle?: any
}

const CusSelectMulti = (props: SelectProps) => {
  const {
    Options,
    restProps,
    value,
    onChange,
    className,
    placeholder,
    label,
    style,
    mode,
    labelStyle
  } = props;
  return (
    (<div className={cn(className, styles.cusSelect)}>
      {label && <span style={labelStyle}>{label}</span>}
      <Select
        style={{ width: 126, ...style }}
        // suffixIcon={<img src={select_img} />}
        value={value}
        onChange={onChange}
        {...restProps}
        placeholder={placeholder || "请选择"}
        popupClassName={styles.dropdown}
        dropdownMatchSelectWidth={false}
        tokenSeparators={[',']}
        className= {cn("findfit_select")}
        mode={mode || 'tags'}
        suffixIcon={
          <span className="findfit_icon findfit_icon_arrow "></span>
        }
        defaultOpen={false}

      >
        {Options.map((v) => (
          <Select.Option key={v?.key || v?.value} value={v?.key || v?.value}>
            {v?.val || v?.label}
          </Select.Option>
        ))}
      </Select>
    </div>)
  );
};

export default CusSelectMulti;
